<template>
	<view class="box">
		<view style="padding: 0 140rpx; background-color: #fff;">
			<u-tabs active-color="#FF6E56" inactive-color="#333333" :list="list" :is-scroll="false" :current="currents"
				@change="change"></u-tabs>
		</view>
		<view v-if="currents==0">
			<view class="class">
				<view class="list" v-for="(item,index) in orderList" :key="item.id" @tap="goDetail(item.id)">
					<view class="" >
						<view class="createTime">
							<text>发布时间：{{item.createTime}}</text>
							<view class="" style="display: flex;align-items: center;">
								<text class="item-head-left">课程ID：{{item.code}}</text>
								<image style="width: 23rpx; height: 25rpx;margin-left: 10rpx;"
									src="@/static/copy/copy.png" @click.stop="toCopy(item.code)" />
							</view>
							<!-- <text>课程ID：{{item.code}}</text> -->
						</view>
						<view class="des">
							<view class="left">
								<view style="overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 260rpx;">
									<image style="width: 25rpx;height: 29rpx;" src="../../static/image/user.png"
										mode="">
									</image>
									<text>学生姓名：{{item.studentName}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 23rpx;height: 26rpx;" src="../../static/image/subject.png"
										mode="">
									</image>
									<text>科目：{{item.counsellingSubjectName ||'--'}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 30rpx;height: 30rpx;" src="../../static/image/beizhu.png"
										mode="">
									</image>
									<text style="    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 252rpx;">科目备注：{{item.subjectRemark||'无'}}</text>
								</view>
							</view>
							<view class="right">
								<view>
									<image style="width: 28rpx;height: 28rpx;" src="../../static/image/nianji.png"
										mode="">
									</image>
									<text>年级：{{item.studyGradeName}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 33rpx;height: 28rpx;" src="../../static/image/skdd.png"
										mode="">
									</image>
									<text>授课地点：{{item.teachType==2 ? '线上授课' : '上门授课'}}</text>
								</view>
							</view>
						</view>
						<view class="teacher" v-if="item.educationOrderApplyVOList">
							<!-- {{item.educationOrderApplyVOList.length}} -->
							<text>已有{{item.educationOrderApplyVOList.length}}位老师投递简历，<text
									class="click">点击查看</text></text>
							<view class="avatar"
								style="width: 590rpx;height: 74rpx;overflow: hidden;display: flex;align-items: center;">
								<view style="position: relative;"
									v-for="(items,indexs) in item.educationOrderApplyVOList" :key="items.id">
									<image :src="items.teacherVO.bareheadedPhoto" mode=""></image>
									<u-badge v-if="indexs===4" :absolute="true" type="error" :count="count"></u-badge>

								</view>
							</view>

						</view>

						<!-- 			<view class="teacher">
					<text>已有{{item.educationOrderApplyVOList.length}}位老师投递简历，<text
						class="click">点击查看</text></text>
				<view class="avatar"
					style="width: 590rpx;height: 74rpx;overflow: hidden;display: flex;align-items: center;">
					<view style="position: relative;" v-for="(items,indexs) in 8" :key="items">
						<image src="/static/image/ax.png" mode=""></image>
						<u-badge v-if="indexs===4" type="error" count="7"></u-badge>
			
					</view>
				</view>
			</view> -->
						<view class="foot">
							<view class="fabu">
								{{item.status ==0? '待审核' :item.status ==1&&item.orderType==1&&item.courseType==1? '待分配': item.status ==1&&item.courseType==2?'待支付'  :item.status ==1&&item.orderType==2? '待支付' :item.status ==2 ? '待确认' :item.status ==3 ? '授课中':item.status ==4?'已完成':item.status ==5?'审批拒绝:':item.status ==97?'退款中': item.status ==98?'已退款':item.status ==99 ?'已关闭':''}}<text
									v-if="item.status ==5">{{item.auditRemark}}</text>
							</view>
							<view class="detail" @tap.stop="goDetail(item.id)"
								v-if="item.status==0||item.status ==3||item.status ==2">
								查看详情
							</view>
							<!-- <view class="detail"  v-if="item.status==2">
								查看反馈
							</view> -->
							<view class="detail" @tap.stop="fabu(item.id)"
								v-if="item.status==4||item.status==5||item.status==97||item.status==98||item.status==99">
								重新发布
							</view>
							<!-- 			<view class="detail" v-if="item.status ==1&&item.orderType==1&&item.courseType ==1">
								待分配
							</view> -->
							<!-- 			<view class="detail" v-if="item.status ==1&&item.orderType==1&&item.courseType ==2">
								待支付
							</view> -->
							<view class="detail" v-if="item.status ==1&&item.courseType ==1" @tap.stop="doPay(item.id)">
								查看详情
							</view>
							<view class="detail" v-if="item.status ==1&&item.courseType ==2" @tap.stop="doPay1(item)">
								去支付
							</view>
							<!-- 			<view class="detail" v-if="item.status ==2" @tap.stop="doPay(item)">
								去支付
							</view> -->
						</view>
					</view>
				</view>
				<view class="down" @click="toClose" v-if="!orderShow">
					<text>点击打开堆叠的全部课程</text>
					<image style="width: 42rpx;height: 42rpx; margin-left: 20rpx;" src="../../static/image/down.png"
						mode=""></image>
				</view>
				<view class="down" @click="toClose" v-if="orderShow">
					<text>点击收起堆叠课程</text>
					<image style="width: 42rpx;height: 42rpx; margin-left: 20rpx;" src="../../static/image/down.png"
						mode=""></image>
				</view>
			</view>

		</view>
		<view v-if="currents==1">
			<view class="tab">
				<view :class="current1===index ? 'one' :'another'" @click="changeIndex(index)"
					v-for="(item,index) in list1" :key="index">
					{{item.name}}
				</view>
			</view>
			<view>
				<view style="padding: 50rpx 30rpx; 0 ">
					<view class="cusreon" @tap="goCusDtil(item.id)" v-for="item in orderList" :key="item.id"
						style="margin-bottom: 50rpx;">
						<view class="orgiorn">

							<text>发布时间：{{item.createTime}}</text>
							<view class="" style="display: flex;align-items: center;">
								<text class="item-head-left">课程ID：{{item.code}}</text>
								<image style="width: 23rpx; height: 25rpx;margin-left: 10rpx;"
									src="@/static/copy/copy.png" @click.stop="toCopy(item.code)" />
							</view>
						</view>
						<view class="des">
							<view class="left">
								<view style="    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 260rpx;">
									<image style="width: 25rpx;height: 29rpx;" src="../../static/image/yonghu.png"
										mode="">
									</image>
									<text>学生姓名：{{item.studentName}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 23rpx;height: 26rpx;" src="../../static/image/kemu.png"
										mode="">
									</image>
									<text>科目：{{item.counsellingSubjectName ||'--'}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 30rpx;height: 30rpx;" src="../../static/image/beizhu1.png"
										mode="">
									</image>
									<text style="    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 252rpx;">授课老师：{{item.teacherName||'无'}}</text>
								</view>
								<!-- 		<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 23rpx;height: 26rpx;" src="../../static/image/shouci.png"
										mode="">
									</image>
									<text>首次购买</text>
								</view> -->
							</view>
							<view class="right">
								<view>
									<image style="width: 28rpx;height: 28rpx;" src="../../static/image/grand.png"
										mode="">
									</image>
									<text>年级：{{item.studyGradeName}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 33rpx;height: 28rpx;" src="../../static/image/didian.png"
										mode="">
									</image>
									<text>授课地点：{{item.teachType==2 ? '线上授课' : '上门授课'}}</text>
								</view>
								<view style="display: flex; align-items: center; margin-top: 50rpx;">
									<image style="width: 33rpx;height: 28rpx;" src="../../static/image/yishang.png"
										mode="">
									</image>
									<text>已上课:
										<text>{{item.feedbackNum}}</text>/<text>{{item.classNumber}}</text></text>
								</view>
							</view>
						</view>
						<view class="last">
							<view class="jieke">
								<text>{{item.status==3?'授课中':item.status==4 ? '已完成':item.status ==97?'退款中':item.status==98?'已退款':item.status==99?'已关闭':''}}</text>
							</view>
							<view class="anniu">
								<view v-if="item.status!==3" class="fankui" @tap="fankui(item.id)">
									查看反馈
								</view>
								<view class="fankui" @tap.stop="fabu(item.id)">
									重新发布
								</view>
								<view v-if="item.isHire===-1 && item.status==4" class="gouke" @tap.stop="buy(item.id)">
									在线购课
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="orderList.length===0" text=" 列表为空" mode="list"></u-empty>
		<!-- <tabbarLevel current="3"></tabbarLevel> -->
	</view>
</template>

<script>
	import lodingHtml from '@/common/home/index.vue'
	// import tabbarLevel from '@/components/tabbar/tabbar.vue'
	import utils from '@/common/utils.js';
	export default {
		components: {
			// tabbarLevel,
			lodingHtml
		},
		data() {
			return {
				offset: [20, 80],
				orderShow: true,
				isAuth: 0,
				isCan: 0,
				popShow: false,
				content: '查看该项需授权登录,并补充相关信息',
				orderList: [],
				list: [{
					name: '我的发布'
				}, {
					name: '我的课程'
				}],
				list1: [{
						name: '试听课程'
					},
					{
						name: '正式课程'
					},
				],
				qq: '',
				
				count: 1,
				current1: 0,
				currents: 0,
				// 分页
				current: 1,
				size: 10,
				type: 1,
				courseType: 1,
				pageTotal: 1, //总页码
				// arr: [{
				// 		src: '/static/tab/fabu.png'
				// 	},
				// 	{
				// 		src: '/static/tab/fabu.png'
				// 	},
				// 	{
				// 		src: '/static/tab/fabu.png'
				// 	},
				// 	{
				// 		src: '/static/tab/fabu.png'
				// 	},
				// 	{
				// 		src: '/static/tab/fabu.png'
				// 	}
				// ],
				// arrsum:3,
			}
		},
		onReachBottom() {
			if (this.current < this.pageTotal) {
				this.current += 1;
				if (this.currents == 0) {
					this.getList();
				} else {
					this.getCourse()
				}
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次\
			this.orderList = []
			this.current = 1
			if (this.currents === 0) {
				
				this.orderList = []
				this.getList()
			}

			if (this.currents === 1) {
				this.orderList = []
				this.getCourse()
			}



			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		onLoad(opt) {
			if(opt.current==1){
				this.currents = 1
			}
			if(opt.current==0){
				this.currents = 0
			}
			uni.showLoading({
				title: '加载中'
			})
			console.log(opt,'qqqq');
		
			this.orderList = []
			this.current = 1
			
			if (this.currents === 0) {

				this.getList()
			} else if (this.currents === 1) {
				// if(opt.current){
				// 	this.currents = opt.current
				// }
				this.getCourse()
			}



			setTimeout(function() {
				uni.hideLoading();
			}, 2000);
		},
		onShow() {

		},
		methods: {
			toClose(){
				this.orderShow=!this.orderShow
				this.current=1
				this.orderList = []
				uni.showLoading({
					title: '加载中'
				})
				this.getList()
			},
			toCopy(txt) {
				let content = txt.toString()
				uni.setClipboardData({
					data: content,
					success: function() {
						console.log('success');
					},
					fail(res) {
						console.log(res)
					}
				});
			},
			doPay1(item) {
				uni.navigateTo({
					url: `/pagesShop/payDetail/payDetail?pay=${JSON.stringify(item)}`
				})
			},
			doPay(id) {
				uni.navigateTo({
					url: `./demandDel?id=${id}`
				})

			},
			change(index) {
				uni.showLoading({
					title: '加载中'
				})

				this.orderList = []
				this.current = 1
				this.currents = index;
				if (index == 0) {
					this.getList()
				} else {
					this.pageTotal = 0
					this.current1 = 0
					this.getCourse()
				}
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			changeIndex(index) {
				uni.showLoading({
					title: '加载中'
				})
				this.current = 1
				this.orderList = []
				this.current1 = index;
				this.pageTotal = 0
				this.getCourse()
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			async getList() {
				this.type = 1
				const res = await this.$u.api.getOrder({
					current: this.current,
					size: this.size,
					type: this.type,
					status:this.orderShow==true?'':'0,1,2,3,5,97,98'
					// courseType:
				})

				this.orderList = this.orderList.concat(res.records)
				// this.count = this.orderList.educationOrderApplyVOList.
				this.orderList.map(item => {
					if (item.educationOrderApplyVOList) {
						this.count = item.educationOrderApplyVOList.length;
						// return
					}

				})
				this.pageTotal = res.pages
				// this.teacherImg = this.orderList.map(item=>{
				// 	console.log(item);
				// 	// item.educationOrderApplyVOList.map(items=>{
				// 	// 	console.log(items);
				// 	// })
				// })
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/invent/demandDel?id=${id}`
				})
			},
			fabu(id) {
				uni.setStorageSync('id', id)
				uni.reLaunch({
					url: `/pages/science/science?id=${id}`
				})
			},
			fankui(id) {
				uni.navigateTo({
					url: `/pages/invent/ourseDetails?id=${id}`
				})
			},
			buy(id) {
				uni.navigateTo({
					url: `/pagesShop/payDetail/onlineBuy?id=${id}`
				})
			},
			goCusDtil(id) {
				console.log(id);
				uni.navigateTo({
					url: `/pages/invent/ourseDetails?id=${id}`
				})
			},
			getCourse() {
				this.type = 2
				this.$u.api.getOrder({
					current: this.current,
					size: this.size,
					courseType: this.current1 + 1,
					type: this.type
				}).then(data => {

					this.orderList = this.orderList.concat(data.records)
					this.pageTotal = data.pages
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2 !important;
	}

	/deep/.u-badge {
		top: 0 !important;
	}

	/deep/.u-tab-bar {
		width: 97rpx !important;
		bottom: -4rpx !important;
		left: -32rpx;
		background-color: inherit !important;
		background: linear-gradient(90deg, #FF8D5F, #FF6A55);
	}

	.tab {
		// padding: 0 6rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 52rpx;
		width: 328rpx;
		height: 84rpx;
		background: #ffffff;
		border-radius: 42rpx;

		.one {
			width: 170rpx;
			height: 84rpx;
			background: #FF7157;
			border-radius: 42rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
		}

		.another {
			width: 150rpx;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
		}
	}

	.cusreon {
		// height: 542rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0rpx 7rpx 32rpx 0rpx rgba(255, 117, 88, 0.06);
		border-radius: 20rpx;

		.orgiorn {
			height: 69rpx;
			background: #FF7157;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 18rpx 0 22rpx;
			height: 69rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.des {
			padding: 40rpx 50rpx 40rpx 44rpx;
			// height: 336rpx;
			border-bottom: 1rpx solid #eeeeee;
			display: flex;
			// align-items: center;
			justify-content: space-between;

			image {
				margin-right: 15rpx;
			}

			text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.last {
			height: 136rpx;
			padding: 0 15rpx 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.des {
				padding: 40rpx 50rpx 40rpx 44rpx;
				// height: 336rpx;
				border-bottom: 1rpx solid #eeeeee;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				image {
					margin-right: 15rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.jieke {
				text {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #8C8C8B;
				}
			}

			.anniu {
				display: flex;
				align-items: center;

				.fankui {
					margin-right: 18rpx;
					width: 153rpx;
					height: 53rpx;
					background: #FFFFFF;
					border: 1px solid #FF7157;
					border-radius: 27rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF7157;
					text-align: center;
					line-height: 53rpx;
				}

				.gouke {
					width: 153rpx;
					height: 53rpx;
					background: #FF7157;
					border-radius: 27rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 53rpx;
				}
			}
		}

	}

	.class {
		margin-top: 48rpx;
		padding: 0 30rpx 30rpx;

		.down {
			justify-content: center;
			display: flex;
			align-items: center;

			text {
				font-size: 31rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999
			}
		}

		.list {
			// height: 677rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 32rpx 0rpx rgba(255, 117, 88, 0.06);
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.createTime {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 18rpx 0 22rpx;
				height: 69rpx;
				background: #57A6FF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				text {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.des {
				padding: 40rpx 50rpx 40rpx 44rpx;
				// height: 233rpx;
				border-bottom: 1rpx solid #eeeeee;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				image {
					margin-right: 15rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.teacher {
				text-align: center;
				height: 228rpx;
				padding-top: 40rpx;
				border-bottom: 1rpx solid #eeeeee;

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;

					.click {
						height: 41rpx;
						display: inline-block;
						border-bottom: 1rpx #FF6C56 solid;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6C56;
					}
				}

				.avatar {
					margin-top: 40rpx;
					padding-left: 142rpx;
					text-align: left;

					image {
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
						margin-right: 25rpx;
					}

				}
			}

			.foot {
				padding: 0 38rpx 0 58rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 145rpx;

				.fabu {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #57A6FF;
				}

				.detail {
					text-align: center;
					line-height: 60rpx;
					width: 180rpx;
					height: 60rpx;
					background: #FFFFFF;
					border: 1px solid #57A6FF;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #57A6FF;
				}
			}
		}
	}
</style>